<template>
  <view class="box" @click="external">
    <view class="tou top fixed" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image @click.stop="fanhui" class="image1" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
			<!-- #ifndef MP-WEIXIN -->
			在售楼盘
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<text style="position: absolute;left:50%;transform: translateX(-50%);">在售楼盘</text>
			<!-- #endif -->
      <image @click.stop="sousuo" class="image2" src="https://pic.bangbangtongcheng.com/static/sousuo.png"
        mode="widthFix" />
    </view>
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'"></view>
    <view class="bannerBox" :class="scrollTop > 20 ? 'Ptop' : ''">
      <view class="banner">
        <swiper style="min-height: 0rpx; height: 345rpx" class="screen-swiper square-dot" :indicator-dots="true"
          :circular="true" :autoplay="true" indicator-active-color="#ffffff" interval="5000" duration="500">
          <swiper-item v-for="(item, index) in bannerList" :key="index" @click.stop="bannerD(item.id)">
            <view style="width: 690rpx; height: 346rpx; background-color: #ffffff;">
              <image :src="imgUrl + item.image" mode="aspectFill" />
			  <view class="byTitle"><span>{{item.title}}</span></view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <!--  -->
    <view>
      <view class="tower-swiper" @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd">
        <view class="tower-item" :class="item.zIndex == 1 ? 'none' : ''" v-for="(item, index) in bannerList1"
          :key="index" :style="[{ '--index': item.zIndex, '--left': item.mLeft }]" :data-direction="direction"
          @click.stop="bannerD(item.id)">
          <view class="swiper-item" style="box-shadow: 10rpx #ccc;">
            <image :src="imgUrl + item.image" mode="aspectFill" />
          </view>
        </view>
      </view>
    </view>
    <view class="list">
      <view class="tit">
        推荐楼盘
        <!-- <view class="sai" @click.stop="showModal" data-target="DrawerModalR">
          筛选
          <span>▼</span>
        </view> -->
      </view>
      <view class="li" v-for="(item, index) in Recommend" :key="index" @click="details(item.id)">
        <image class="bgimage" :src="imgUrl + item.showImg" mode="aspectFit" />
        <image class="shangb" src="https://pic.bangbangtongcheng.com/static/zai.png" v-show="item.isOpen == 1" />
        <image class="shangb" src="https://pic.bangbangtongcheng.com/static/wei.png" v-show="item.isOpen == 0" />
        <view class="li_1">
          <view class="tit">{{ item.title }}</view>
          <view class="jiedao">地址：{{ item.address }}</view>
          <view class="shijian">
            <span>均价：</span>
            <span style="
                margin-right: 24rpx;
                color: red;
                font-size: 36rpx;
                font-weight: 600;
              " v-if="item.averagePrice >= 10000">{{ (item.averagePrice / 10000) | nums }}万/㎡</span>
            <span style="
               margin-right: 24rpx;
               color: red;
               font-size: 36rpx;
               font-weight: 600;
             " v-if="isNaN(item.averagePrice)">{{ item.averagePrice }}</span>
            <span style="
                margin-right: 24rpx;
                color: red;
                font-size: 36rpx;
                font-weight: 600;
              " v-if="item.averagePrice < 10000">{{ item.averagePrice }}元/㎡</span>
          </view>
        </view>
      </view>
      <view v-if="Recommend.length == 0" class="none">
        <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
        <view>没有更多数据了</view>
      </view>
      <view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
    </view>
    <view v-if="scrollTop>20" class="hui" @click.stop="totop">
      <image src="https://pic.bangbangtongcheng.com/static/top.png" />返回顶部
    </view>
    <view class="cu-modal drawer-modal justify-end" :class="modalName == 'DrawerModalR' ? 'show' : ''">
      <view class="cu-dialog basis-lg" @tap.stop :style="[
          {
            top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',
            height: 'calc(100vh - ' + CustomBar1 + 'px - 36px)',
          },
        ]">
        <view class="cu-list menu text-left">
          <view class="tit">
            <view @click.stop="hideModal()">×</view>筛选
          </view>
          <!-- <view class="leibie">
            类别
            <span style="color:#999999;">（请选择类别）</span>
            <view class="list">
              <view
                :class="leibieLiat.indexOf(item) != -1?'li xuan':'li'"
                v-for="item in 4"
                :key="item"
              >住宅</view>
            </view>
          </view>-->
          <!-- <view class="quyu">
            区域
            <span style="color: #999999">（请选择区域）</span>
            <view class="list">
              <view
                @click="type7Click(index)"
                class="li"
                :class="item.active ? 'li xuan' : 'li'"
                v-for="(item, index) in type7"
                :key="index"
                >{{ item.valueName }}</view
              >
            </view>
          </view>-->
          <view class="jiage">
            价格
            <span style="color: #999999">（请选择价格）</span>
            <view class="list">
              <view @click.stop="type8Click(index)" class="li" :class="item.active ? 'li xuan' : 'li'"
                v-for="(item, index) in type20" :key="index">{{ item.valueName }}</view>
            </view>
          </view>
          <view class="loucen">
            户型
            <span style="color: #999999">（请选择户型）</span>
            <view class="list">
              <view @click.stop="type3Click(index)" class="li" :class="item.active ? 'li xuan' : 'li'"
                v-for="(item, index) in type3" :key="index">{{ item.valueName }}</view>
            </view>
          </view>
          <!-- <view class="mianji">
            面积
            <span style="color: #999999">（请选择面积）</span>
            <view class="list">
              <view @click.stop="type9Click(index)" class="li" :class="item.active ? 'li xuan' : 'li'"
                v-for="(item, index) in type9" :key="index">{{ item.valueName }}</view>
            </view>
          </view> -->
          <!-- <view class="loucen">
            楼层
            <span style="color: #999999">（请选择楼层）</span>
            <view class="list">
              <view @click.stop="type10Click(index)" class="li" :class="item.active ? 'li xuan' : 'li'"
                v-for="(item, index) in type10" :key="index">{{ item.valueName }}</view>
            </view>
          </view> -->
        </view>
      </view>
      <view class="di">
        <view class="div l" @click.stop="cz">重置</view>
        <view class="div r" @click.stop="sx">确定</view>
      </view>
    </view>
		<uniBall></uniBall>
    <!-- <view-tabbar :selected="0"></view-tabbar> -->
  </view>
</template>

<script>
  import {
    mapGetters
  } from "vuex";
  let statusBarHeight;
  //#ifdef H5
  import wxshare from "../../utils/index.js";
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
  //#endif
  // #ifdef APP-PLUS
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
  //  #endif
  // #ifdef MP-WEIXIN
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5 + 88;
  //  #endif
  import Tabbar from "@/components/tabbar.vue";
  import {
    log
  } from "util";
  export default {
    data() {
      return {
        statusBarHeight,
        modalName: "",
        leibieLiat: [1],
        bannerList: [],
        bannerList1: [],
        towerStart: 0,
        direction: "",
        Recommend: [],
        imgUrl: this.$imgSrc,
        trigger: false,
        downStatus: true,
        upStatus: true,
        showType: false,
        scrollTop: "0",
        pageSize: 10,
        pageNo: 1,
        CustomBar1: "",
        type3: [],
        type7: [],
        type20: [],
        type9: [],
        type10: [{
            active: false,
            valueName: "低层",
            value: "1"
          },
          {
            active: false,
            valueName: "中层",
            value: "2"
          },
          {
            active: false,
            valueName: "高层",
            value: "3"
          }
        ],
        region: "",
        price: "",
        floorage: "",
        layerNumber: "",
        type: "",
        layerNumber: "",
        screenWidth: 205
      };
    },
    components: {
      "view-tabbar": Tabbar
    },
    filters: {
      nums(val) {
        return val.toFixed(2);
      }
    },
    computed: {
      ...mapGetters(["statusBarHeight1", "userinfo"])
    },
    onPageScroll: function (Object) {
      console.log(Object.scrollTop); //实时获取到滚动的值
      console.log(this.statusBarHeight1); //实时获取到滚动的值
      this.scrollTop = Object.scrollTop;
    },
    onLoad() {
      var that = this;
      this.getBanner();
      this.getBanner1();
      this.getRecommend();
      this.getType();
      this.CustomBar1 = this.CustomBar;
      // 初始化towerSwiper 传已有的数组名即可
      /* #ifdef H5 */
      this.jinzhi();
      /* #endif */
    },
    onReachBottom() {
      // console.log("到底了");
      this.down();
    },
    async onPullDownRefresh() {
      this.Recommend = [];
      this.pageNo = 1;
      this.downStatus = true;
      if (this.upStatus) {
        this.trigger = true;
        await this.getRecommend();
      }
    },
    methods: {
      fanhui() {
        uni.navigateBack({
          delta: 1
        });
      },
      getBanner() {
        this.$myRequest
          .get("/mob/home/getBanner", {
            type: "8"
          })
          .then(res => {
            this.bannerList = res.list;
          });
      },
      jinzhi() {
        let _this = this;
        let param = window.location.href.split("#")[0];
        uni.request({
          method: "post",
          data: {
            url: param
          },
          header: {
            "content-type": "application/x-www-form-urlencoded"
          },
          url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
          success(re) {
            _this.jinzhifx(re.data);
          }
        });
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ["hideMenuItems"]
        });
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            "menuItem:share:appMessage",
            "menuItem:share:timeline",
            "menuItem:share:timeline",
            "menuItem:share:qq",
            "menuItem:favorite",
            "menuItem:share:QZone",
            "menuItem:openWithSafari"
          ]
        });
      },
      getBanner1() {
        var that = this;
        this.$myRequest
          .get("/mob/home/getBanner", {
            type: "5"
          })
          .then(res => {
            // for (var i = 0; i < 5; i++) {
            // 	this.bannerList1.push(res.list[i])
            // }
            this.bannerList1 = res.list;
            this.TowerSwiper("bannerList1");
          });
        setInterval(function () {
          that.direction = "left";
          that.TowerEnd();
        }, 5000);
      },
      cz() {
        this.type3.forEach(el => {
          el.active = false;
        });
        this.type7.forEach(el => {
          el.active = false;
        });
        this.type20.forEach(el => {
          el.active = false;
        });
        this.type9.forEach(el => {
          el.active = false;
        });
        this.type10.forEach(el => {
          el.active = false;
        });
        this.floorage = "";
        this.layerNumber = "";
        this.region = "";
        this.type = "";
        this.price = "";
        this.Recommend = [];
        this.pageNo = 1;
        this.downStatus = true;
        this.getRecommend();
      },
      totop() {
        console.log("a11111");
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 300
        });
      },
      sx() {
        let that = this;
        this.floorage = "";
        this.layerNumber = "";
        this.region = "";
        this.type = "";
        this.price = "";
        this.type3.forEach(el => {
          if (el.active == true) {
            that.type = el.valueName;
          }
        });
        this.type7.forEach(el => {
          if (el.active == true) {
            that.region = el.valueName;
          }
        });
        this.type20.forEach(el => {
          if (el.active == true) {
            that.price = el.valueName;
          }
        });
        this.type9.forEach(el => {
          if (el.active == true) {
            that.floorage = el.valueName;
          }
        });
        this.type10.forEach(el => {
          if (el.active == true) {
            that.layerNumber = el.value;
          }
        });
        this.Recommend = [];
        this.pageNo = 1;
        this.downStatus = true;
        this.modalName = null;
        this.getRecommend();
      },
      sousuo() {
        // console.log("搜索");
        // if (!this.userinfo.phone) {
        //   uni.showToast({
        //     title: "请登录",
        //     icon: "none",
        //     mask: true
        //   });
        //   return;
        // }
        uni.navigateTo({
          url: "/pages_search/search?searchlogType=2"
        });
      },
      down() {
        if (this.downStatus) {
          this.pageNo++;
          console.log(this.pageNo);
          this.getRecommend();
        }
      },
      async up() {
        this.Recommend = [];
        this.pageNo = 1;
        this.downStatus = true;
        if (this.upStatus) {
          this.trigger = true;
          await this.getRecommend();
        }
      },
      getType() {
        let that = this;
        this.$myRequest
          .get("/mob/home/getDictionaries", {
            pageNo: 1,
            pageSize: 10,
            type: "3,7,8,9,16,20"
          })
          .then(res => {
            console.log(res);
            res.list.forEach(el => {
              el.active = false;
              if (el.type == 7) {
                that.type7.push(el);
              } else if (el.type == 20) {
                that.type20.push(el);
              } else if (el.type == 9) {
                that.type9.push(el);
              } else if (el.type == 16) {
                that.type3.push(el);
              }
            });
            // this.list = this.list.concat(res.list);
          });
      },
      getRecommend() {
        this.upStatus = false;
        this.$myRequest
          .get("/mob/user/getBuildingsInfo", {
            pageSize: this.pageSize,
            pageNo: this.pageNo,
            // region: this.region,
            price: this.price,
            area: this.floorage,
            type: this.type,
            floor: this.layerNumber,
            auditStatus: '2'
          })
          .then(res => {
            if (!res.page.list.length) {
              this.downStatus = false;
            }
            if (res.page.count < this.pageNo * this.pageSize) {
              this.downStatus = false;
            }
            this.upStatus = true;
            this.trigger = false;
            res.page.list.forEach(el => {
              if (el.showImg) {
                el.showImg = el.showImg.split("|")[0];
              }
            });
            console.log(this.Recommend);
            this.Recommend = this.Recommend.concat(res.page.list);
            uni.stopPullDownRefresh();
            // this.userInfo = res.userInfo;
            // uni.setStorageSync("Pduser", res.userInfo);
          });
      },
      bannerD(id) {
        uni.navigateTo({
          url: "/pages/index/bannerDetails?id=" + id
        });
      },
      tiaozhuan(num) {
        if (num == 1) {
          uni.navigateTo({
            url: "/pages_houses/housing/index"
          });
        } else if (num == 2) {
          uni.navigateTo({
            url: "/pages_houses/houses/index"
          });
        } else if (num == 3) {
          uni.navigateTo({
            url: "/pages_intermediary/index"
          });
        }
      },
      type3Click(index) {
        let that = this;
        this.type3.forEach((el, index1) => {
          if (index == index1) {
            that.$set(that.type3[index1], "active", !el.active);
          } else {
            that.type3[index1].active = false;
          }
        });
      },
      type7Click(index) {
        let that = this;
        this.type7.forEach((el, index1) => {
          if (index == index1) {
            that.$set(that.type7[index1], "active", !el.active);
          } else {
            that.type7[index1].active = false;
          }
        });
      },
      type8Click(index) {
        let that = this;
        this.type20.forEach((el, index1) => {
          if (index == index1) {
            that.$set(that.type20[index1], "active", !el.active);
          } else {
            that.type20[index1].active = false;
          }
        });
      },
      type9Click(index) {
        let that = this;
        this.type9.forEach((el, index1) => {
          if (index == index1) {
            that.$set(that.type9[index1], "active", !el.active);
          } else {
            that.type9[index1].active = false;
          }
        });
      },
      type10Click(index) {
        let that = this;
        this.type10.forEach((el, index1) => {
          if (index == index1) {
            that.$set(that.type10[index1], "active", !el.active);
          } else {
            that.type10[index1].active = false;
          }
        });
      },
      // showModal(e) {
      //   this.modalName = e.currentTarget.dataset.target;
      // },
      external() {
        this.modalName = null;
      },
      hideModal(e) {
        this.modalName = null;
      },
      details(id) {
        uni.navigateTo({
          url: "/pages_houses/houses/housesDetails?id=" + id
        });
      },
      // towerSwiper
      // 初始化towerSwiper
      TowerSwiper(name) {
        let list = this[name];
        for (let i = 0; i < list.length; i++) {
          list[i].zIndex =
            parseInt(list.length / 2) +
            1 -
            Math.abs(i - parseInt(list.length / 2));
          list[i].mLeft = i - parseInt(list.length / 2);
        }
        this.swiperList = list;
      },
      // towerSwiper触摸开始
      TowerStart(e) {
        this.towerStart = e.touches[0].pageX;
      },
      // towerSwiper计算方向
      TowerMove(e) {
        this.direction =
          e.touches[0].pageX - this.towerStart > 0 ? "right" : "left";
      },

      // towerSwiper计算滚动
      TowerEnd(e) {
        let direction = this.direction;
        let list = this.swiperList;
        if (direction == "right") {
          let mLeft = list[0].mLeft;
          let zIndex = list[0].zIndex;
          for (let i = 1; i < this.swiperList.length; i++) {
            this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft;
            this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex;
          }
          this.swiperList[list.length - 1].mLeft = mLeft;
          this.swiperList[list.length - 1].zIndex = zIndex;
        } else {
          let mLeft = list[list.length - 1].mLeft;
          let zIndex = list[list.length - 1].zIndex;
          for (let i = this.swiperList.length - 1; i > 0; i--) {
            this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft;
            this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex;
          }
          this.swiperList[0].mLeft = mLeft;
          this.swiperList[0].zIndex = zIndex;
        }
        this.direction = "";
        this.swiperList = this.swiperList;
      }
    }
  };
</script>

<style lang="less" scoped>
  .box {
    width: 100%;
    // padding-bottom: 120rpx;
    background-color: #fff;
  }

  .tou {
    position: relative;
    width: 100%;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;
		/* #ifdef MP-WEIXIN */
		text-align: left;
		display: flex;
		align-items: center;
		/* #endif */
    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }

    .image2 {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
	  bottom: 16rpx!important;
      // top: 30%;
      // // /* #ifdef APP-PLUS || H5 */
      // top: 50%;
      // /* #endif */
      right: 30rpx;
      /* #ifdef MP-WEIXIN */
      position: initial;
      margin-left: auto;
      margin-right: 200rpx;
      /* #endif */
      // #ifdef APP
      // top: 50%;
      // #endif
    }
  }

  .bannerBox {
    width: 100%;
    height: 400rpx;
    background: #64b6a8;
    padding-top: 28rpx;
    margin-top: -4rpx;

    .banner {
      margin-left: 30rpx;
      width: 690rpx;
      height: 346rpx;
      overflow: hidden;
      border-radius: 24rpx;
	  .byTitle {
	  	width: 100%;
	  	height: 100%;
	  	position: absolute;
	  	top: 0;
	  	left: 0;
	  	background-color: rgba(0, 0, 0, 0.1);
	  
	  	span {
	  		width: 650rpx;
	  		padding: 0 20rpx;
	  		position: absolute;
	  		bottom: 46rpx;
        font-size: 34rpx;
	  		font-weight: 500;
	  		color: #FFFFFF;
	  		white-space: nowrap;
	  		text-overflow: ellipsis;
	  		overflow: hidden;
	  	}
	  }
    }
  }

  .list {
    margin-top: 10rpx;
    margin-left: 30rpx;
    width: 720rpx;

    .tit {
      position: relative;
      color: #333333;
      font-size: 36rpx;
      margin-bottom: 30rpx;

      .sai {
        position: absolute;
        font-size: 32rpx;
        top: 4rpx;
        right: 30rpx;

        span {
          margin-left: 8rpx;
          font-size: 20rpx;
        }
      }
    }

    .li {
      width: 96%;
      padding-bottom: 30rpx;

      .bgimage {
        background-color: #f8f8f8;
        width: 300rpx;
        height: 200rpx;
      }

      .li_1 {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-left: 24rpx;

        .tit {
          width: 366rpx;
          font-size: 34rpx;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1; //想要的行数
          -webkit-box-orient: vertical;
        }

        .jiedao {
          width: 366rpx;
          height: 70rpx;
          font-size: 24rpx;
          margin-bottom: 10rpx;
          color: #666666;
          // overflow: hidden;
          // text-overflow: ellipsis;
          // display: -webkit-box;
          // -webkit-line-clamp: 2; //想要的行数
          // -webkit-box-orient: vertical;
          // display: inline-block;

          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          // line-height: 12.5px;
        }

        .shijian {
          bottom: 4rpx;
          font-size: 26rpx;

          .ycyc {
            display: inline-block;
            width: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 12.5px;
          }
        }
      }
    }

    .li:last-child {
      border-bottom: 0rpx solid #e0e0e0;
    }
  }

  .hui {
    position: fixed;
    right: 30rpx;
    bottom: 154rpx;
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
    background-color: #fff;
    border-radius: 34rpx;
    font-size: 26rpx;
    box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.16);
    
    image {
    	width: 46rpx;
    	height: 46rpx;
    	margin-right: 18rpx;
    }
  }

  .cu-list {
    padding-bottom: 98rpx;

    .tit {
      position: relative;
      width: 100%;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 30rpx;
      border-bottom: 2rpx solid #cccccc;

      view {
        position: absolute;
        top: 0rpx;
        left: 20rpx;
        color: #999999;
        font-size: 54rpx;
        font-weight: 100;
      }
    }

    .leibie {
      margin-top: 40rpx;
      font-size: 28rpx;
      margin-left: 40rpx;

      .list {
        width: 100%;
        margin-top: 24rpx;

        .li {
          display: inline-block;
          text-align: center;
          width: 154rpx;
          height: 60rpx;
          line-height: 60rpx;
          background: #f2f2f2;
          border-radius: 30rpx;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
        }

        .xuan {
          background: #64b6a8;
          color: #fff;
        }
      }
    }

    .quyu {
      margin-top: 40rpx;
      font-size: 28rpx;
      margin-left: 40rpx;

      .list {
        width: 100%;
        margin-top: 24rpx;

        .li {
          display: inline-block;
          text-align: center;
          width: 154rpx;
          height: 60rpx;
          line-height: 60rpx;
          background: #f2f2f2;
          border-radius: 30rpx;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
        }

        .xuan {
          background: #64b6a8;
          color: #fff;
        }
      }
    }

    .jiage {
      margin-top: 40rpx;
      font-size: 28rpx;
      margin-left: 40rpx;

      .list {
        width: 100%;
        margin-top: 24rpx;

        .li {
          display: inline-block;
          text-align: center;
          width: 214rpx;
          height: 60rpx;
          line-height: 60rpx;
          background: #f2f2f2;
          border-radius: 30rpx;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
        }

        .xuan {
          background: #64b6a8;
          color: #fff;
        }
      }
    }

    .mianji {
      margin-top: 40rpx;
      font-size: 28rpx;
      margin-left: 40rpx;

      .list {
        width: 100%;
        margin-top: 24rpx;

        .li {
          display: inline-block;
          text-align: center;
          width: 214rpx;
          height: 60rpx;
          line-height: 60rpx;
          background: #f2f2f2;
          border-radius: 30rpx;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
        }

        .xuan {
          background: #64b6a8;
          color: #fff;
        }
      }
    }

    .loucen {
      margin-top: 40rpx;
      font-size: 28rpx;
      margin-left: 40rpx;

      .list {
        width: 100%;
        margin-top: 24rpx;

        .li {
          display: inline-block;
          text-align: center;
          width: 154rpx;
          height: 60rpx;
          line-height: 60rpx;
          background: #f2f2f2;
          border-radius: 30rpx;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
        }

        .xuan {
          background: #64b6a8;
          color: #fff;
        }
      }
    }
  }

  .cu-dialog {
    max-width: 100%;
    width: 600rpx;
  }

  .basis-lg {
    flex-basis: 600rpx;
    overflow: auto;
  }

  .di {
    position: fixed;
    width: 100%;
    bottom: 0rpx;
    left: 74rpx;

    .div {
      display: inline-block;
      width: 300rpx;
      height: 98rpx;
      text-align: center;
      line-height: 98rpx;
      font-size: 30rpx;
    }

    .l {
      background: #e0e0e0;
    }

    .r {
      background: #64b6a8;
      color: #fff;
    }
  }

  .tower-swiper {
    height: 300rpx;
    transform: scale(1);
  }

  .tower-swiper .tower-item {
    transform: scale(calc(0.6 + var(--index) / 10));
    margin-left: calc(var(--left) * 110upx - 135upx);
    z-index: var(--index);
    width: 360rpx;
    height: 260rpx;
    left: 44%;
    box-shadow: 0px 13px 12px rgba(0, 0, 0, 0.2);

  }

  .tower-swiper .tower-item.none {
    opacity: 1;
  }

  .Ptop {
    /* #ifdef H5 || APP-PULS */
    // padding-top: 104rpx;
    margin-top: 98rpx;
    /* #endif */

    /* #ifdef MP  */
    // margin-top: 188rpx;
    /* #endif */
  }

  .fixed {
    // display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 40;
  }

  .down {
    height: 60rpx;
    line-height: 60rpx;
    // border-top: 2rpx solid #d0d0d0;
    text-align: center;
  }

  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
    }
  }

  .shangb {
    position: absolute;
    /* top: 0px; */
    left: 30rpx;
    width: 104rpx;
    height: 85rpx;
  }
</style>